<template>
  <a-card :bordered="false">
    <div class="file-list-wrapper">
      <!-- 操作按钮 -->
      <div class="table-operator">
        <OperationMenu
          :operationFile="operationFile"
          :selectionFile="selectionFile"
          :filePath="filePath().current()"
          :batchOperate.sync="batchOperate"
          @getSearchFileList="getSearchFileList"
          @getTableDataByType="getTableDataByType"
          @setMoveFileDialogData="setMoveFileDialogData"
        ></OperationMenu>
      </div>
      <div class="middle-wrapper">
        <!-- 面包屑导航栏 -->
        <BreadCrumb class="breadcrumb"  @getTableDataByTypeAndPath="getTableDataByTypeAndPath"></BreadCrumb>
      </div>
      <!-- 文件列表-表格模式 -->
      <FileTable
        :fileList="fileList"
        :loading="loading"
        v-if="fileModel().isTable()"
        @setMoveFileDialogData="setMoveFileDialogData"
        @setOperationFile="setOperationFile"
        @setSelectionFile="setSelectionFile"
        @getTableDataByType="getTableDataByType"
        @getTableDataByTypeAndPath="getTableDataByTypeAndPath"
      ></FileTable>
      <!-- 文件列表-网格模式 -->
      <FileGrid
        :fileList="fileList"
        :loading="loading"
        :batchOperate="batchOperate"
        v-if="fileModel().isGrid()"
        @setMoveFileDialogData="setMoveFileDialogData"
        @setOperationFile="setOperationFile"
        @setSelectionFile="setSelectionFile"
        @getTableDataByType="getTableDataByType"
      ></FileGrid>
      <!--    &lt;!&ndash; 图片-时间线模式 &ndash;&gt;-->
      <!--    <FileTimeLine class="image-model" v-if="fileModel().isTimeLine()" :fileList="fileList"></FileTimeLine>-->
      <div class="pagination-wrapper">
<!--        <div class="current-page-count">当前页{{ fileList.length }}条</div>-->
        <a-pagination
          v-model="pageData.currentPage"
          :total="pageData.total"
          :page-size-options="pageSizeOptions"
          show-size-changer
          :page-size="pageData.pageCount"
          @showSizeChange="handleSizeChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </div>
      <!-- 移动文件模态框 -->
      <MoveFileDialog
        :dialogMoveFile="dialogMoveFile"
        @setSelectFilePath="setSelectFilePath"
        @confirmMoveFile="confirmMoveFile"
        @setMoveFileDialogData="setMoveFileDialogData"
      ></MoveFileDialog>
    </div>
  </a-card>
</template>

<script>
import OperationMenu from './components/OperationMenu'
import BreadCrumb from './components/BreadCrumb'
import FileTable from './components/FileTable'
import FileGrid from './components/FileGrid'
// import FileTimeLine from './components/FileTimeLine'
import MoveFileDialog from './components/MoveFileDialog'

import {
  getFileList,
  selectFileByFileType,
  getRecoveryFile,
  getFileTree,
  moveFile,
  batchMoveFile,
  searchFile,
} from '@/api/file.js'
import {FILE_TYPE, ROOT_PATH} from "../../global/globalConst";


export default {
  name: 'MyFileIndex',
  components: {
    OperationMenu,
    BreadCrumb,
    FileTable,
    FileGrid,
    // FileTimeLine,
    MoveFileDialog
  },
  data() {
    return {
      fileNameSearch: '',
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      loading: true, //  表格数据-loading
      fileList: [], //  表格数据-文件列表
      pageData: {
        currentPage: 1,
        pageCount: 10,
        total: 0
      },
      //  移动文件模态框数据
      dialogMoveFile: {
        isBatchMove: false,
        visible: false, //  是否可见
        fileTree: [] //  目录树
      },
      selectFilePath: Number, //  移动文件路径
      operationFile: {}, // 当前操作行
      selectionFile: [], // 勾选的文件
      batchOperate: false,//  批量操作模式
      currentClickPath:ROOT_PATH

    }
  },
  computed: {
    //  当前查看的文件路径
    currentPath: {
      get() {
        return this.currentClickPath
      },
      set() {
        return this.currentClickPath
      }
    },
    // 文件类型
    currentFileType: {
      get() {
        return this.FILE_TYPE.ALL
      },
      set() {
        return this.FILE_TYPE.ALL
      }
    },
    // 文件查看模式 0列表模式 1网格模式 2 时间线模式
    currentFileModel() {
      return this.FILE_MODEL.GRID
    },
  },
  watch: {
    currentPath() {
      this.getTableDataByType()
      this.setPageCount()
    },
    currentFileType(newValue, oldValue) {
      if (oldValue === this.FILE_TYPE.IMAGE && this.fileModel().isTimeLine()) {
        this.$store.commit('changeFileModel', this.FILE_MODEL.TABLE)
      }
      this.getTableDataByType()
      this.setPageCount()
    },
    // 监听文件查看模式
    currentFileModel() {
      this.getTableDataByType()
      this.setPageCount()
    }
  },
  created() {
    this.$store.dispatch('fetchPathTreeMap')
    this.setPageCount()
    this.getTableDataByType()
  },
  methods: {
    /**
     * 表格数据获取相关事件
     */
    reflushFileList(res) {
      this.loading = false
      this.fileList = res.records
      console.log(this.fileList);
      this.pageData.total = res.total
    },
    // 调整分页大小
    setPageCount() {
      this.pageData.currentPage = 1
      if (this.fileModel().isTable()) {
        this.pageData.pageCount = 10
      }
      if (this.fileModel().isGrid()) {
        this.pageData.pageCount = 40
      }
    },
    // 获取文件列表数据
    getTableDataByType() {
      this.batchOperate = false
      this.loading = true
      // 分类型
      if (this.fileType().isNotAll()) {
        if (this.fileType().isRecycle()) {
          this.showFileRecovery() //  回收站
        } else {
          this.showFileListByType()
        }
      } else {
        // 全部文件
        this.showFileList(this.currentPath)
      }
    },
    // 获取文件列表数据
    getTableDataByTypeAndPath(path) {
      this.currentClickPath=path;
      // Vue.set(this.currentPath,path)
      console.log(this.currentPath)
      console.log(this.currentClickPath)
      this.batchOperate = false
      this.loading = true
      // 分类型
      if (this.fileType().isNotAll()) {
        if (this.fileType().isRecycle()) {
          this.showFileRecovery() //  回收站
        } else {
          this.showFileListByType()
        }
      } else {
        // 全部文件
        this.showFileList()
      }
    },
    // 获取当前路径下的文件列表
    showFileList() {
      let data = {
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageCount
      }
      if (this.currentPath != null) {
        data.pid = this.currentPath
      }

      getFileList(data).then((res) => {
        this.reflushFileList(res.result)
        console.log(res.result)
      }).catch(err => {
        console.log(err)
        this.$message.error("服务器正忙")
      })
    },
    // 分页组件 当前页码改变
    handleCurrentChange(currentPage) {
      this.pageData.currentPage = currentPage
      this.getTableDataByType()
    },
    handleSizeChange(current,pageCount) {
      this.pageData.pageCount = pageCount
      this.pageData.currentPage = current
      this.getTableDataByType()
    },
    // 获取回收站文件列表
    showFileRecovery() {
      let data = {
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount
      }
      getRecoveryFile(data).then((res) => {
        this.reflushFileList(res)
      }).catch(err => {
        console.log(err)
        this.$message.error("服务器正忙")
      })
    },
    // 根据文件类型展示文件列表
    showFileListByType() {
      //  分类型
      let data = {
        currentPage: this.pageData.currentPage,
        pageCount: this.pageData.pageCount,
        fileType: FILE_TYPE.ALL
      }
      selectFileByFileType(data).then((res) => {
        this.reflushFileList(res)
      }).catch(err => {
        console.log(err)
        this.$message.error("服务器正忙")
      })
    },

    /**
     * 表格勾选框事件
     */
    //  勾选的行
    setSelectionFile(selection) {
      this.selectionFile = selection
    },

    /**
     * 移动按钮相关事件
     */
    //  当前操作行
    setOperationFile(operationFile) {
      this.operationFile = operationFile
    },
    //  设置移动文件模态框相关数据，isBatchMove为null时是确认移动，值由之前的值而定
    setMoveFileDialogData(isBatchMove, visible) {
      this.initFileTree()
      this.dialogMoveFile.isBatchMove = isBatchMove ? isBatchMove : this.dialogMoveFile.isBatchMove
      this.dialogMoveFile.visible = visible
    },
    //  移动文件模态框：初始化文件目录树
    initFileTree() {
      getFileTree().then((res) => {
        this.dialogMoveFile.fileTree = [res]
      }).catch(err => {
        console.log(err)
        this.$message.error("服务器正忙")
      })
    },
    //  设置移动后的文件路径
    setSelectFilePath(selectFilePath) {
      this.selectFilePath = selectFilePath
    },
    //  移动文件模态框-确定按钮事件
    confirmMoveFile() {
      if (this.dialogMoveFile.isBatchMove) {
        //  批量移动
        let data = {
          from: this.selectionFile.flatMap(row => row.id),
          to: this.selectFilePath
        }
        if (!data.to) {
          delete data.to
        }
        batchMoveFile(data).then(() => {
          this.$message.success("文件移动成功")
          this.getTableDataByType()
          this.dialogMoveFile.visible = false
          this.selectionFile = []
          this.$store.dispatch('fetchPathTreeMap')
        }).catch(err => {
          console.error(err)
          this.$message.error("系统忙，移动失败")
        })
      } else {
        //  单文件移动
        let data = {
          from: this.operationFile.id,
          to: this.selectFilePath,
        }
        if (!data.to) {
          delete data.to
        }
        moveFile(data).then(() => {
          this.$store.dispatch('fetchPathTreeMap')
          this.$message.success('移动文件成功')
          this.getTableDataByType()
          this.dialogMoveFile.visible = false
        }).catch(err => {
          console.error(err)
          this.$message.error("系统忙，移动失败")
        })
      }
    },
    // 获取搜索文件结果列表
    getSearchFileList(content) {
      this.loading = true
      searchFile({
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageCount,
        content: content
      }).then(res => {
        this.reflushFileList(res.result)
      }).catch(err => {
        console.error(err)
        this.$message.error("服务器正忙")
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.file-list-wrapper {
  a-page-header {
    padding: 0
  }

  .middle-wrapper {
    margin-bottom: 8px
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid #DCDFE6;
    height: 44px;
    line-height: 44px;
    text-align: center;
    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color:  #606266
    }
  }


}
</style>
